<template>
  <div class="home">
    <div class="catd_top" align="center">
      <h2 :style="{ 'float': 'left', 'margin': '20px 0 0 10px' }">{{ realTime }}</h2>
      <!-- <h2> <strong>红星湖数据监管平台</strong> </h2> -->
      <el-cascader placeholder="请选择数据权限，默认全部" v-model="deptIos" collapse-tags
        :style="{ 'float': 'left', 'margin': '13px 0 0 20px', 'width': '30rem' }" @change="handlerChangeOpions(deptIos)"
        :options="options" :props="{ multiple: true, checkStrictly: true }" clearable>
      </el-cascader>
      <el-image :src="src" class="topbigo animate__animated animate__bounceInDown"
        @click.native="handleOpenBi"></el-image>
    </div>
    <div class="home_top">
      <div class="card_left">
        <div class="card_home">
          <div class="nav_top">
            <svg-icon class-name="iconClass" icon-class="shebei01" /><span>设备状态</span>

            <!-- <i class="el-icon-s-help iconClass"></i> -->
          </div>
          <div class="conterhome" @click="close('/deviceManagement/equipment/ledger', '0')">
            <div :style="{ 'display': 'inline-block' }">
              <div :style="'color:' + '#409EFF'">
                <i class="el-icon-success size_style" />
                <span>
                  正常<span style="font-size:32px;font-weight: bold;">
                    <span v-if="normal">
                      <span v-for="(item, index) in statusCount" :key="index">
                        <template v-if="item.status === '0'">
                          {{ item.count }}
                        </template>
                      </span>
                    </span>
                    <span v-else>
                      0
                    </span>
                  </span>台
                </span>
              </div>
            </div>
          </div>
          <div class="conterhome" @click="close('/deviceManagement/equipment/ledger', '3')">
            <div :style="{ 'display': 'inline-block' }">
              <div :style="'color:' + '#F56C6C'">
                <i class="el-icon-error size_style" />
                <span>
                  故障<span style="font-size:32px;font-weight: bold;">
                    <span v-if="normal3">
                      <span v-for="(item, index) in statusCount" :key="index">
                        <template v-if="item.status === '3'">
                          {{ item.count }}
                        </template>
                      </span>
                    </span>
                    <span v-else>
                      0
                    </span>
                  </span>台
                </span>
              </div>
            </div>
          </div>
          <div class="conterhome" @click="close('/deviceManagement/equipment/ledger', '2')">
            <div :style="{ 'display': 'inline-block' }">
              <div :style="'color:' + '#E6A23C'">
                <i class="el-icon-warning size_style" />
                <span>
                  检修中<span style="font-size:32px;font-weight: bold;">
                    <span v-if="normal2">
                      <span v-for="(item, index) in statusCount" :key="index">
                        <template v-if="item.status === '2'">
                          {{ item.count }}
                        </template>
                      </span>
                    </span>
                    <span v-else>
                      0
                    </span>
                  </span>台
                </span>
              </div>
            </div>
          </div>
          <div class="conterhome" @click="close('/deviceManagement/equipment/ledger', '1')">
            <div :style="{ 'display': 'inline-block' }">
              <div :style="'color:' + '#9400D3'">
                <i class="el-icon-warning size_style" />
                <span>
                  带病运行 <span style="font-size:32px;font-weight: bold;">
                    <span v-if="normal1">
                      <span v-for="(item, index) in statusCount" :key="index">
                        <template v-if="item.status === '1'">
                          {{ item.count }}
                        </template>
                      </span>
                    </span>
                    <span v-else>
                      0
                    </span>
                  </span> 台
                </span>
              </div>
            </div>
          </div>
          <div class="conterhomeSEY">
            <div class="opclass">
              <div style="width:100%">
                <el-progress type="dashboard" :stroke-width="18" :percentage="percentage" :color="colors"></el-progress>
              </div>
              <div>
                <el-tag style="margin:-10px 12px 0px">正常率</el-tag>
              </div>
            </div>


          </div>
        </div>
        <div class="left_aling">
          <div class="aling_center">
            <div class="nav_top">
              <svg-icon class-name="iconClass" icon-class="shebei03" /><span>设备使用年限分布</span>
              <!-- <i class="el-icon-s-help iconClass"></i> -->
            </div>
            <div id="dateids" style="width: 100%; min-height: 220px" />
          </div>
          <div class="aling_center">
            <div class="nav_top">
              <svg-icon class-name="iconClass" icon-class="shebei04" /><span>设备类型</span>
              <!-- <i class="el-icon-s-help iconClass"></i> -->
            </div>
            <div class="aling_center_div">
              <div>
                <div style="display:flex;" v-for="(item) in Meterage" :key="item.index">
                  <template v-if="item.meterageFlag === '1'">
                    <div style="flex:2">
                      <el-progress :text-inside="true" :format="format(item.count)" :stroke-width="26"
                        :percentage="setItemProgress(item.count)"></el-progress>
                    </div>
                    <div
                      style="flex:1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                      <span>非计量设备</span>
                      <div>
                        {{ item.count || 0 }}台
                      </div>
                    </div>
                  </template>
                </div>
                <div style="display:flex;margin-top: 20px;" v-for="(item) in Meterage" :key="item.index">
                  <template v-if="item.meterageFlag === '0'">
                    <div style="flex:2">
                      <el-progress :text-inside="true" :format="format(item.count)" :stroke-width="24" :show-text="true"
                        :percentage="setItemProgress(item.count)" status="success">
                      </el-progress>
                    </div>
                    <div
                      style="flex:1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                      <span>计量设备</span>
                      <div>
                        {{ item.count || 0 }}台
                      </div>
                    </div>
                  </template>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="card_right">
        <div class="nav_top">
          <svg-icon class-name="iconClass" icon-class="shebei02" /><span>使用状态</span>
          <!-- <i class="el-icon-s-help iconClass"></i> -->
        </div>
        <div id="datarightid" style="width: 100%; height: 100%" />
      </div>
    </div>
    <div class="home_bottom">
      <div class="bottim_left">
        <div class="nav_top">
          <svg-icon class-name="iconClass" icon-class="shebei05" /><span>设备巡检</span>
          <!-- <i class="el-icon-s-help iconClass"></i> -->
          <span class="top_float">
            <el-date-picker v-model="TimeQuery" :picker-options="pickerOptions" type="daterange"
              value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="ClickTiem" style="margin-left:5px" icon="el-icon-search" size="medium">
            </el-button>
          </span>
        </div>
        <el-row style="width: 100%">
          <el-col :span="16">
            <!-- <div class="dateEcharts"> -->
            <el-scrollbar style="height:100%;width: 100%">
              <template v-if="isshow">
                <div ref="dateid" style="width:100%;min-height: 330px;" />
              </template>
            </el-scrollbar>
            <!-- </div> -->
          </el-col>
          <el-col :span="8">
            <el-scrollbar style="height:330px;width: 100%">
              <div ref="presid" style="width: 100%; min-height: 330px;" />
            </el-scrollbar>
          </el-col>
        </el-row>

      </div>
      <div class=" bottim_right">
        <div class="nav_top">
          <svg-icon class-name="iconClass" icon-class="shebei06" /><span>设备分类</span>
          <!-- <i class="el-icon-s-help iconClass"></i> -->
        </div>
        <!-- <div class="typeEcharts"> -->
        <el-scrollbar style="height:330px">
          <div id="echartstype" style="width: 100%;" />
        </el-scrollbar>
        <!-- </div> -->

        <!-- style="width: 100%; height: 100%;overflow: scroll;overflow-y: auto;overflow-x: auto;" -->
      </div>
    </div>
    <template v-if="biVisible">
      <Bi :realTime="realTime" @clear="handleCloseBi"></Bi>
    </template>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'animate.css'
import { mapMutations } from 'vuex'
import topleft from '@/assets/images/u45copy.gif'
import { formatDateIndex } from '@/utils/index.js'
import screenfull from 'screenfull'
import { treeselect } from '@/api/system/dept.js'
import { getstatuscount, getuserStatuscount, gettypeNamecount, getuserYearcount, getMeterageFlagcount, getinspectionTaskRecordcount, getinspectionTasktoDay } from '@/api/mianBody/index.js'
import { clearInterval } from 'timers'
export default {
  name: "Index",
  components: {
    Bi: () => import('@/components/bi/index.vue')
  },
  data () {
    return {
      percentage: 0,
      biVisible: false,
      src: topleft,
      realTime: formatDateIndex(new Date()),
      statusCount: [],//设备状态
      options: [],//部门权限列表
      deptIos: [],
      deptIds: [],
      normal: false,
      normal3: false,
      normal1: false,
      normal2: false,
      userStatus: [],//环形图
      typeName: [],//设备类别
      typecount: [],//设备类别
      UserYearNmae: [],//设备使用年限数量
      UserYearNum: [],//设备使用年限数量
      Meterage: [],//计量
      TimeQuery: '',
      TimeName: [],
      TimeNum1: [],
      TimeNum2: [],
      TimePre: [],
      TimePre1: [],
      TimePre2: [],
      isshow: true,
      pickerMinDate: this.picerstar, // 获取开始选择时间
      pickerOptions: {
        // 限制不能选择今天之后的日期
        disabledDate: (time) => {
          // if (this.pickerMinDate !== '') {
          //   const one = 15 * 24 * 3600 * 1000
          //   const minTime = this.pickerMinDate - one
          //   let maxTime = this.pickerMinDate + one
          //   if (maxTime > new Date()) {
          //     maxTime = new Date()
          //   }
          //   return time.getTime() < minTime || time.getTime() > maxTime
          // }
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#67C23A', percentage: 100 }
      ],
      timerSetInterval: null,
      recordSetInterval: null,
      timerPreSetInterval: null,
      valintTime: null,
      srcImgtime: false

    };
  },
  computed: {
    picerstar () {
      if (this.TimeQuery != null) {
        return this.TimeQuery[0]
      }
    },
  },
  created () {
    // this.getinitStatucCount()
  },
  mounted () {
    // this.valintTime = setInterval(() => {
    this.getinitStatucCount()
    // }, 300000);
  },
  destroyed () {
    // 清除定时器
    clearInterval(this.timerSetInterval)
    clearInterval(this.recordSetInterval)
    clearInterval(this.timerPreSetInterval)
    // clearInterval(this.valintTime)

  },
  methods: {
    ...mapMutations(['SET_ISCONDITION']),
    /**
     * 关闭大屏
     */
    handleCloseBi () {
      document.body.style.overflow = 'auto'
      this.biVisible = false
      if (screenfull.isFullscreen) screenfull.toggle()
    },
    /**
     * 打开大屏
     */
    handleOpenBi () {
      // console.log(window.screen.height, window.screen.width);
      // if (window.screen.height < 1080 || window.screen.width < 1920) {
      //   return this.$message.warning('当前分辨率不支持大屏,支持：1920*1080')
      // }
      // return this.$message.warning('功能待开发')
      if (!screenfull.isFullscreen) {
        screenfull.toggle().then(() => {
          document.body.style.overflow = 'hidden'
          this.biVisible = true
        })
      }
    },
    /**
     * 部门列表
     */
    handlerChangeOpions (deptID) {
      this.$modal.loading("数据权限正在修改中，请稍候...");
      this.deptIds = deptID.map(item => {
        return item[item.length - 1]
      })
      this.getinitStatucCount(1)
    },
    close (path, status) {
      // this.$refs['popover'].doClose()
      this.SET_ISCONDITION('2')
      this.$tab.closeOpenPage({ path: path }, 1, status)
    },
    // 设置进度
    setItemProgress (count) {
      let Arr = this.Meterage.map(item => item.count)
      let totalNum = Arr.reduce((total, item) => {
        return total + item
      }, 0)
      let num = parseFloat(totalNum)
      if (this.Meterage[0].count > this.Meterage[1].count) {
        if (this.Meterage[0].count == count) {
          return 100
        } else {
          // return parseInt((this.Meterage[0].count * count).toFixed(1))
          return Math.round(this.Meterage[1].count / num * 10000) / 100.00
        }
      } else {
        if (this.Meterage[1].count == count) {
          return 100
        } else {
          // return parseInt((this.Meterage[1].count / count).toFixed(1))
          return Math.round(this.Meterage[0].count / num * 10000) / 100.00
        }
      }
    },
    format (percentage) {
      return () => {
        return percentage + '台'
      }
      // return percentage === 100 ? '满' : `${percentage}`;
    },
    recursionTree (data) {
      let Arr = []
      data.map((item) => {
        let obj = {
          ...item,
          value: item.id
        }
        if (item.children) {
          obj = { ...obj, children: this.recursionTree(item.children) }
        }
        Arr.push(obj)
      })
      return Arr
    },
    async getinitStatucCount (ie) {
      if (!ie) this.$modal.loading("加载中，请稍候...");
      try {
        let deptList = await treeselect({ status: 0 })//部门
        let statusNum = await getstatuscount({ deptIdsCondition: this.deptIds })//设备状态数量
        let data = await getuserStatuscount({ deptIdsCondition: this.deptIds })//设备使用状态
        let type = await gettypeNamecount({ deptIdsCondition: this.deptIds })//设备类别数量
        let Year = await getuserYearcount({ deptIdsCondition: this.deptIds })//设备使用年限数量
        let Meterage = await getMeterageFlagcount({ deptIdsCondition: this.deptIds })//设备计量数量
        this.options = []
        deptList.data.forEach(element => {
          let obj = {
            ...element,
            value: element.id
          }
          if (element.children) {
            obj = { ...obj, children: this.recursionTree(element.children) }
          }
          this.options.push(obj)
        });
        this.recursionTree(deptList.data)
        this.ClickTiem()
        this.statusCount = statusNum.data
        console.log(this.statusCount);
        let num = 0
        let correct = 0
        statusNum.data.map(item => {
          num += item.count
          if (item.status === '0') {
            correct = item.count
          }
        })
        this.percentage = Math.floor(correct / num * 100)
        this.userStatus = data.data.map(item => {
          return {
            value: item.count,
            name: item.userStatusName
          }
        })
        this.typeName = type.data.map(item => item.typeName)
        this.typecount = type.data.map(item => item.count)
        this.UserYearNmae = []
        this.UserYearNum = []
        Year.data.map(item => {
          switch (item.userYear) {
            case '0':
              this.UserYearNmae.push('一年以内')
              this.UserYearNum.push(item.count)
              break;
            case '1':
              this.UserYearNmae.push('一到三年')
              this.UserYearNum.push(item.count)
              break;
            case '2':
              this.UserYearNmae.push('三到五年')
              this.UserYearNum.push(item.count)
              break;
            case '3':
              this.UserYearNmae.push('五到十年')
              this.UserYearNum.push(item.count)
              break;
            case '4':
              this.UserYearNmae.push('十年以上')
              this.UserYearNum.push(item.count)
              break;
          }
        })
        this.Meterage = Meterage.data
        if (this.Meterage.length == 1) {
          let flag = Meterage.data.some(item => item.meterageFlag == 1)
          this.Meterage.push({
            count: '0',
            meterageFlag: flag ? '0' : '1'
          })
        } else if (this.Meterage.length == 0 || this.Meterage == null) {
          this.Meterage.push(
            {
              count: '0',
              meterageFlag: '1'
            },
            {
              count: '0',
              meterageFlag: '0'
            },
          )
        }
        this.normal = this.statusCount.some(item => item.status === '0')//是否存在正常
        this.normal3 = this.statusCount.some(item => item.status === '3')//是否存在故障
        this.normal1 = this.statusCount.some(item => item.status === '1')//是否存在故障
        this.normal2 = this.statusCount.some(item => item.status === '2')//是否存在故障

        this.$nextTick(() => {
          this.initEcharts()
          // this.timeinit()
        })
        this.$modal.closeLoading()
      } catch (err) {
        this.$modal.closeLoading()
      }
    },
    async ClickTiem () {
      let params = {
        'beginTime': this.TimeQuery[0] && this.TimeQuery[0] || this.getDay(-14),
        'endTime': this.TimeQuery[1] && this.TimeQuery[1] || this.getDay(0),
        deptIdsCondition: this.deptIds
      }
      this.isshow = false
      let time = await getinspectionTaskRecordcount(params)//巡检数
      this.TimeName = time.data.map(item => item.date)
      this.TimeNum1 = time.data.map(item => item.inspectionPlanEqCount)
      this.TimeNum2 = time.data.map(item => item.actualCompleteEqCount)
      let data = await getinspectionTasktoDay(params)//巡检饼状图
      this.TimePre = data.data.map(item => {
        return {
          name: item.implementStatus,
          value: item.implementStatusCount
        }
      })
      this.isshow = true
      this.$nextTick(() => {
        this.timeinit()
        this.preInit()
      })
    },
    preInit () {
      this.timerPreSetInterval = setTimeout(() => {
        let text = `${this.TimeQuery[0] && this.TimeQuery[0] || this.getDay(-14)} ~  ${this.TimeQuery[1] && this.TimeQuery[1] || this.getDay(0)}`
        var myChart = echarts.init(this.$refs.presid)
        let option = {
          tooltip: {
            trigger: 'item'
          },
          title: {
            text: text,
            textStyle: {
              fontSize: 13,
              fontWeight: 'normal'
            },
            left: 'center',
            top: 'bottom'
          },
          legend: {
            // orient: 'vertical',
            left: 'left',
            top: 'top',
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '45%',
              data: this.TimePre,
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colorList = ['#f43f3b', '#ec008c', '#39b54a', '#ff9700', '#6739b6', '#1cbbb4']
                    return colorList[params.dataIndex]
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        myChart.on("click", this.eConsole);
      }, 20)
    },
    eConsole (params) {
      let path = '/equipmentInspct/Record'
      let status;
      switch (params.data.name) {
        case '待完成':
          status = 0
          break;
        case '延期中':
          status = 1
          break;
        case '已完成':
          status = 2
          break;
        case '延期完成':
          status = 3
          break;
        case '已失效':
          status = 4
          break;
      }
      this.$tab.closeOpenPage({ path: path }, 2, status)
    },
    timeinit () {
      this.recordSetInterval = setTimeout(() => {
        var myChart = echarts.init(this.$refs.dateid)
        let option = {
          legend: {
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: ['#409EFF', '#8dc63f'],
          xAxis: {
            type: 'category',
            data: this.TimeName
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '计划巡检数量',
              data: this.TimeNum1,
              type: 'bar',
              // barWidth: 40,
            },
            ,
            {
              name: '实际巡检数量',
              type: 'bar',
              // barWidth: 40,
              data: this.TimeNum2,
            }
          ]
        }
        myChart.setOption(option)

      }, 20)
    },
    initEcharts () {
      this.timerSetInterval = setTimeout(() => {

        var myCharttime = echarts.init(document.getElementById('dateids'))

        let optiontime = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.UserYearNmae,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '35',
              data: this.UserYearNum,
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colorList = ['#409EFF', '#67C23A', '#F56C6C', '#E6A23C', '#909399', '#409EFF', '#67C23A']
                    return colorList[params.dataIndex]
                    // return colorList[0]
                  }
                }
              }
            }
          ]
        }

        myCharttime.setOption(optiontime)
        var myChartRight = echarts.init(document.getElementById('datarightid'))
        console.log(this.userStatus);
        var myChartType = echarts.init(document.getElementById('echartstype'))
        let optionRight = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
                normal: {
                  color: (params) => {
                    let colorList = ['#409EFF', '#67C23A', '#FFC0CB', '#8A2BE2', '#00FA9A', '#F56C6C', '#E6A23C', '#909399', '#409EFF', '#67C23A']
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '36',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.userStatus
            }
          ]
        }
        let optionType = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          // legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: this.typeName
          },
          series: [
            {
              type: 'bar',
              data: this.typecount,
              barWidth: '35',
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colorList = ['#409EFF', '#67C23A', '#FFC0CB', '#8A2BE2', '#00FA9A', '#00BFFF', '#F56C6C', '#E6A23C', '#909399', '#409EFF', '#67C23A']
                    return colorList[params.dataIndex]
                  }
                }
              }
            },
            // {
            //   name: '2012',
            //   type: 'bar',
            //   data: [19325, 23438, 31000, 121594, 134141, 681807]
            // }
          ]
        }
        myChartRight.setOption(optionRight)
        myChartType.setOption(optionType)
        var autoHeight = optionType.yAxis.data.length * 50 + 150;
        myChartType.getDom().style.height = autoHeight + "px";
        myChartType.getDom().childNodes[0].style.height = autoHeight + "px";
        myChartType.getDom().childNodes[0].childNodes[0].setAttribute("height", autoHeight);
        myChartType.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
        myChartType.resize();
      }, 20)
    },
    getDay (day) {//获取当前日期 0为当前 递减 
      var today = new Date()

      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day

      today.setTime(targetday_milliseconds) // 注意，这行是关键代码

      var tYear = today.getFullYear()

      var tMonth = today.getMonth()

      var tDate = today.getDate()

      tMonth = this.doHandleMonth(tMonth + 1)

      tDate = this.doHandleMonth(tDate)

      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth (month) {
      var m = month

      if (month.toString().length == 1) {
        m = '0' + month
      }

      return m
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep.home .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

.catd_top {
  overflow-x: hidden;
  width: 100%;
  // padding: 20px;
  height: 63px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  margin-bottom: 10px;

  .topbigo {
    width: 447px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 85px;
  }
}

.typeEcharts {
  box-sizing: border-box;
  width: 100%;
  height: 330px;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
}

.typeEcharts::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  height: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
}

.typeEcharts::-webkit-scrollbar-track {
  background-color: #fff;
}

.typeEcharts::-webkit-scrollbar-thumb {
  background: #1890ff;
  border-radius: 25px;
}

.dateEcharts {
  box-sizing: border-box;
  // padding-left: 20px;
  padding-top: 20px;
  width: 100%;
  height: 330px;
  overflow: scroll;
  overflow-y: hidden;
  overflow-x: auto;
}

.dateEcharts::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  height: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
}

.dateEcharts::-webkit-scrollbar-track {
  background-color: #fff;
}

.dateEcharts::-webkit-scrollbar-thumb {
  background: #1890ff;
  border-radius: 25px;
}

.home {
  min-width: calc(100vw - 235px);
  min-height: calc(100vh - 124px);
  font-size: 14px;
  color: #747474;
  // background-image: linear-gradient(to left, #ff9569 0%, #e92758 100%);
  // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // background-color: #fff;
  // min-height: calc(100vh - 124px);
  margin: 20px;

  .iconClassTop {
    font-size: 24px;
    margin-right: 3px;
    color: #276ace
  }

  .iconClass {
    font-size: 24px;
    margin-right: 3px;
    color: #409EFF // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  }

  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  // border-radius: 4px;
  .nav_top {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    // line-height: 36px;
    padding: 0 20px;
    box-sizing: border-box;
    height: 40px;
    border-bottom: 1px solid #cdcdcd;

    .top_float {
      position: absolute;
      top: 1px;
      right: 15px;
    }
  }

  .card_left {
    display: flex;
    flex-direction: column;
    // height: 455px;
    flex: 4;
    // margin: 0 10px 0px 0;
    margin: 0 5px 0 0;
    flex-wrap: wrap;
  }

  .card_home {

    flex: 2;
    width: 100%;
    // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    // margin-right: 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;

    .conterhome {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      cursor: pointer;

      .size_style {
        font-size: 36px;
      }


    }

    .conterhomeSEY {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      cursor: pointer;
      // position: relative;

      // .opclass {
      //   position: absolute;
      //   top: -30px;
      //   left: 60px;
      // }

      ::v-deep.el-progress-circle {
        height: 80px !important;
        width: 80px !important;
      }
    }
  }

  .left_aling {
    display: flex;
    flex: 3;
    margin-top: 10px;

    .aling_center:nth-child(1) {
      flex: 1;
      margin-right: 5px;
      position: relative;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;
    }

    .aling_center:nth-child(2) {
      flex: 1;
      margin-left: 5px;
      position: relative;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;

      .aling_center_div {
        width: 100%;
        position: absolute;
        top: 37%;
        left: 7%;
      }
    }
  }

  .card_right {
    flex: 2;
    margin: 0 5px;
    // height: 455px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
  }

  .home_top {
    flex: 1;
    display: flex;
    margin-bottom: 5px;
  }

  .home_bottom {
    flex: 1;
    display: flex;
    margin-top: 5px;

    .bottim_left {
      flex: 4;
      // display: flex;
      margin: 0 5px 0 0;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;
    }

    .bottim_right {
      flex: 2;
      margin: 0 5px;
      // height: 455px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;
    }
  }
}
</style>

